<form nz-form [formGroup]="validateForm" class="mt20">
  <ng-container>
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzFor="avatar" title="头像" nzRequired>头像</nz-form-label>
      <nz-form-control [nzSpan]="13" [nzErrorTip]="combineTpl">
        <nz-upload
          class="avatar-uploader"
          [nzAction]="imgActionUrl"
          nzName="file"
          nzListType="picture-card"
          [nzShowUploadList]="false"
          [nzBeforeUpload]="beforeUpload"
          (nzChange)="handleChange($event)"
        >
          @if (!avatarUrl) {
            <i nz-icon [nzType]="uploading ? 'loading' : 'plus'" onkeydown=""></i>
            <div class="ant-upload-text">Upload</div>
          } @else {
            <img [src]="avatarUrl" alt="" style="width: 100%" />
          }
        </nz-upload>
        <input class="ant-input" type="hidden" nz-input id="avatar" formControlName="avatar" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzFor="username" title="用户名" nzRequired>用户名</nz-form-label>
      <nz-form-control [nzSpan]="13" [nzErrorTip]="combineTpl">
        <input class="ant-input" nz-input id="username" autocomplete="off" formControlName="username" placeholder="请输入" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzFor="password" title="密码" nzRequired>密码</nz-form-label>
      <nz-form-control [nzSpan]="13" [nzErrorTip]="combineTpl">
        <input class="ant-input" autocomplete="off" nz-input type="password" id="password" formControlName="password" placeholder="请输入" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzFor="deactivated" title="启用">启用</nz-form-label>
      <nz-form-control [nzSpan]="13" [nzErrorTip]="combineTpl">
        <nz-switch nzCheckedChildren="启用" nzUnCheckedChildren="禁用" formControlName="deactivated"></nz-switch>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzFor="phone" title="手机号">手机号</nz-form-label>
      <nz-form-control [nzSpan]="13" [nzErrorTip]="combineTpl">
        <input class="ant-input" nz-input id="phone" formControlName="phone" placeholder="请输入" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="roleids" nzRequired [nzSpan]="7">用户角色</nz-form-label>
      <nz-form-control [nzErrorTip]="combineTpl" [nzSpan]="13">
        <nz-input-group>
          <nz-select formControlName="roleids" id="roleid" nzMode="multiple" nzPlaceHolder="角色">
            <nz-option [nzLabel]="option.name" *ngFor="let option of roleOptions" [nzValue]="option.id"></nz-option>
          </nz-select>
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
  </ng-container>
</form>

<ng-template #combineTpl let-control>
  @if (control.hasError('message')) {
    {{ control.errors.message }}
  }
  @if (control.hasError('required')) {
    必填项
  }
</ng-template>
